<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类别管理</title>
<link href="script/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">
<link type="text/css" rel="stylesheet" href="script/css/header.css">
<link type="text/css" rel="stylesheet" href="script/css/category.css">
<script src="script/bootstrap/js/jquery-1.8.2.js"></script>
<script src="script/bootstrap/js/bootstrap.js"></script>
<script src="script/js/util.js"></script>
</head>
<body>
	<div id="header">
		<div class="container">
			<div class="row">
			<div class="span3">
				<h1>
					<a title="糊涂账" href="login.html" class="brand">
						<img width="154" height="49" src="script/img/logo3.png" title="糊涂账" alt="一起来记流水帐">
					</a>
				</h1>
			</div>
			<div class="span9">
				<ul class="nav nav-pills pull-right tnav-menu" style="margin:18px auto;">
					<li class="dropdown" id="userManger">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#userManger">
							用户
							<b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a id="logoutbtn" class='btn-link'>注销</a></li>
							<li><a href="#">个人资料修改</a></li>
							<li class="divider"></li>
							<li><a href="#">给我们提建议</a></li>
						</ul>
					</li>
				</ul>
				<!-- 
				<ul class="nav nav-pills pull-right tnav-menu" style="margin:18px auto;">
					<li><a href="register.html">注销</a></li>
					<li><a href="advice.html">给我们提建议</a></li>
				</ul>
				 -->
				<ul class="nav nav-pills tlnav-menu" style="margin:18px 0px 0px -60px;">
					<li><a href="index.html">我的首页</a></li>
					<li><a href="bill.html">账目管理</a></li>
					<li class="active"><a href="category.html">类别管理</a></li>
					<li><a href="account.html">账户管理</a></li>
				</ul>
			</div>
			</div>
		</div>
	</div>
	<div id="main" class="container">
		<div id="toolBar" class="row">
			<div>
				<a class="btn btn-info" data-toggle="modal" href="#newCategoryDialog" data-keyboard="true" data-backdrop="true"><i class="icon-plus icon-white"></i> 创建类别</a>
				<div class="modal hide fade" id="newCategoryDialog">
					 <div class="modal-header">
						<a class="close" data-dismiss="modal">×</a>
						<h3>创建新的类别</h3>
					</div>
					<div class="modal-body">
						<form id="newCategoryForm" class="form-horizontal">
							<div id="divCategoryLevel" class="control-group">
								<label class="control-label" for="inCategoryLevel">级别</label>
								<div class="controls">
									<label class="radio inline">
										<input type="radio" name="categoryLevel" id="inFirstCategoryLevel" value="0"></input>
										一级类别
									</label>
									<label class="radio inline">
										<input type="radio" name="categoryLevel" id="inSecondCategoryLevel" value="1"></input>
										二级类别
									</label>
								</div>
							</div>
							<div id="divCategoryType" class="control-group">
								<label class="control-label" for="inCategoryType">类型</label>
								<div class="controls">
									<input id="inCategoryType" type="text" name="categoryType" value="支出">
								</div>
							</div>
							<div id="divParentId" class="control-group">
								<label class="control-label" for="selParentId">上级类别</label>
								<div class="controls">
									<select id="selParentId" name="parentId">
									</select>
								</div>
							</div>
							<div id="divCategoryName" class="control-group">
								<label class="control-label" for="inCategoryName">类型名称</label>
								<div class="controls">
									<input id="inCategoryName" type="text" name="categoryName">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<input id="newCategoryCalBtn" type="button" class="btn" value="取消">
						<input id="newCategoryBtn" type="button" class="btn btn-primary" value="新增">
					</div>
				</div>
			</div>
		</div>
		<div id="categoryTab">
			<table id="categoryList" class="table table-hover table-condensed">
				<caption><h4>收支类别</h4></caption>
				<thead>
					<tr>
						<th></th>
						<th>名称</th>
						<th>类型</th>
						<th>记录</th>
						<th>操作</th>
						<th>调整顺序</th>
					</tr>
				</thead>
			</table>
			<div class="modal hide fade" id="editCategoryDialog">
				<div class="modal-header">
					<a class="close" data-dismiss="modal">×</a>
					<h3>修改类别信息</h3>
				</div>
				<div class="modal-body">
					<form id="editCategoryForm" class="form-horizontal">
						<div id="divEditCategoryId" class="control-group">
							<label class="control-label" for="inEditCategoryId">类别</label>
							<div class="controls">
								<input id="inEditCategoryId" type="text" name="categoryId">
							</div>
						</div>
						<div id="divEditCategoryName" class="control-group">
							<label class="control-label" for="inEditCategoryName">类型名称</label>
							<div class="controls">
								<input id="inEditCategoryName" type="text" name="categoryName">
							</div>
						</div>
						<div id="divEditCategoryType" class="control-group">
							<label class="control-label" for="inEditCategoryType">类型</label>
							<div class="controls">
								<input id="inEditCategoryType" type="text" name="categoryType">
							</div>
						</div>
						<div id="divEditParentId" class="control-group">
							<label class="control-label" for="selEditParentId">上级类别</label>
							<div class="controls">
								<select id="selEditParentId" name="parentId">
								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<input id="editCategoryCalBtn" type="button" class="btn" value="取消">
					<input id="editCategoryBtn" type="button" class="btn btn-primary" value="保存">
				</div>
			</div>
		</div>
	</div>
</body>
</html>

<script type="text/javascript">
function initNewCategoryDialog() {
	$("input[name='categoryLevel'][value=1]").attr("checked",true);
	$('#divCategoryType').hide();
	$('#inCategoryType').attr("disabled", true);
	$('#divParentId').show();
	$('#selParentId').attr("disabled", false);
	getParentIdList();
}

function getParentIdList() {
	$.ajax({
		type: "POST",
		url: "business/com.heavenbird.book.action.CategoryAction?action=getFirstLevelCategory",
		dataType: "json",
		success: function(data, textStatus) {
			$('#selParentId').empty();
			if(data.success == true) {
				var categoryShortInfos = data.categoryShortInfos;
				var len = $(categoryShortInfos).length;
				$.each(categoryShortInfos, function(i, n) {
					$("<option></option>").val(n.categoryId).text(n.categoryName).appendTo($('#selParentId'));
				});
			} else {
				alert(data.msg);
			}
		}
	});
}

function refreshFirstCategoryList() {
	$('#categoryList').children("tbody").remove();
	
	$.ajax({
		type: "POST",
		url: "business/com.heavenbird.book.action.CategoryAction?action=getCateoryInfo",
		dataType: "json",
		success: function(data, textStatus) {
			if (data.success == true) {
				var categoryShortInfos = data.categoryShortInfos;
				var len = $(categoryShortInfos).length;
				$.each(categoryShortInfos, function(i, n) {
					if(len==0) {
						alert('该用户下无任何类别！');
						return;
					} else if(len==1) {
						var tbBody = "<tr id='" + n.categoryId + "'>" + "<td><a id='" + n.categoryId + "_queryCCBtn' class='btn-link' onclick='queryChildrenCategory(" + n.categoryId + ")'><i class='icon-chevron-right'></i></a></td>" + "<td>" + n.categoryName + "</td>";
						if(n.categoryDef == 1) {
							tbBody += "<td>支出</td>"
						} else if(n.categoryDef == 2) {
							tbBody += "<td>收入</td>"
						}
						tbBody += "<td>" + n.num + "</td>" + "<td>" + "<a id='" + n.categoryId + "_editBtn' class='btn-link' onclick='editCategory(" + n.categoryId + ")'>修改</a></td>" + "<td></td></tr>";
					} else if(len>1) {
						var tbBody = "<tr id='" + n.categoryId + "'>" + "<td><a id='" + n.categoryId + "_queryCCBtn' class='btn-link' onclick='queryChildrenCategory(" + n.categoryId + ")'><i class='icon-chevron-right'></i></a></td>" + "<td>" + n.categoryName + "</td>";
						if(n.categoryDef == 1) {
							tbBody += "<td>支出</td>" + "<td>" + n.num + "</td>" + "<td>" + "<a id='" + n.categoryId + "_editBtn' class='btn-link' onclick='editCategory(" + n.categoryId + ")'>修改</a> <a id='" + n.categoryId + "_delBtn' class='btn-link' onclick='delCategory(" + n.categoryId + ")'>删除</a></td>";
						} else if(n.categoryDef == 2) {
							tbBody += "<td>收入</td>" + "<td>" + n.num + "</td>" + "<td>" + "<a id='" + n.categoryId + "_editBtn' class='btn-link' onclick='editCategory(" + n.categoryId + ")'>修改</a></td>";
						}
						if(i==0) {
							tbBody += "<td><a id='" + n.categoryId + "_downBtn' class='btn-link' onclick='downCategory(" + n.categoryId + ")'><i class='icon-arrow-down'></i></a></td>";
						}else if(i==len-2){
							tbBody += "<td><a id='" + n.categoryId + "_upBtn' class='btn-link' onclick='upCategory(" + n.categoryId + ")'><i class='icon-arrow-up'></i></a></td>";
						}else if(i==len-1){
							tbBody += "<td></td>";
						}else{
							tbBody += "<td><a id='" + n.categoryId + "_downBtn' class='btn-link' onclick='downCategory(" + n.categoryId + ")'><i class='icon-arrow-down'></i></a>  <a id='" + n.categoryId + "_upBtn' class='btn-link' onclick='upCategory(" + n.categoryId + ")'><i class='icon-arrow-up'></i></a></td>";
						}
						tbBody += "</tr>";
					}
					$("#categoryList").append(tbBody);
				});
			} else {
				alert(data.msg);
			}
		}
	})
}
//显示子类别
function queryChildrenCategory(parentId) {
	var id = parentId + '_queryCCBtn';
	var obj = $('#'+id).children('i');
	if (obj.hasClass('icon-chevron-right')) {
		obj.removeClass('icon-chevron-right');
		obj.addClass('icon-chevron-down');
		//获取子类别
		$.ajax({
			type: "POST",
			url: "business/com.heavenbird.book.action.CategoryAction?action=getCateoryInfo",
			data: "parentId="+parentId,
			dataType: "json",
			success: function(data, textStatus) {
				if(data.success == true) {
					var tbBody = '';
					var childrenCategoryShortInfos = data.categoryShortInfos;
					if (childrenCategoryShortInfos == null) {
						return;
					}
					var len = $(childrenCategoryShortInfos).length;
					$.each(childrenCategoryShortInfos, function(i, n) {
						if(len==1) {
							tbBody = "<tr id='" + n.categoryId + '_' + parentId + "' style='background-color: #fcfcfc;'>" + "<td></td>" + "<td>" + n.categoryName + "</td>";
							if(n.categoryDef == 1) {
								tbBody += "<td>支出</td>"
							} else if(n.categoryDef == 2) {
								tbBody += "<td>收入</td>"
							}
							tbBody += "<td>" + n.num + "</td>" + "<td>" + "<a id='" + n.categoryId + "_editBtn' class='btn-link' onclick='editCategory(" + n.categoryId + ")'>修改</a></td>" + "<td></td></tr>";
						} else if(len>1) {
							tbBody += "<tr id='" + n.categoryId + '_' + parentId + "' style='background-color: #fcfcfc;'>" + "<td></td>" + "<td>" + n.categoryName + "</td>";
							if(n.categoryDef == 1) {
								tbBody += "<td>支出</td>"; 
							} else if(n.categoryDef == 2) {
								tbBody += "<td>收入</td>";
							}
							tbBody += "<td>" + n.num + "</td>" + "<td>" + "<a id='" + n.categoryId + "_editBtn' class='btn-link' onclick='editCategory(" + n.categoryId + ")'>修改</a> <a id='" + n.categoryId + "_delBtn' class='btn-link' onclick='delCategory(" + n.categoryId + ")'>删除</a></td>";
							if(i==0) {
								tbBody += "<td><a id='" + n.categoryId + "_downBtn' class='btn-link' onclick='downCategory(" + n.categoryId + ")'><i class='icon-arrow-down'></i></a></td>";
							}else if(i==len-1){
								tbBody += "<td><a id='" + n.categoryId + "_upBtn' class='btn-link' onclick='upCategory(" + n.categoryId + ")'><i class='icon-arrow-up'></i></a></td>";
							}else{
								tbBody += "<td><a id='" + n.categoryId + "_downBtn' class='btn-link' onclick='downCategory(" + n.categoryId + ")'><i class='icon-arrow-down'></i></a>  <a id='" + n.categoryId + "_upBtn' class='btn-link' onclick='upCategory(" + n.categoryId + ")'><i class='icon-arrow-up'></i></a></td>";
							}
							tbBody += "</tr>";
						}
					});
		
					$.each( $('#categoryList tbody tr'), function(i, tr){
						if($(this).attr('id')==parentId) {
							var currentRow = $('#categoryList tbody tr:eq('+i+')');  
							currentRow.after(tbBody);
						}
					});
					
				} else {
					alert(data.msg);
				}
			}
		});
	} else if (obj.hasClass('icon-chevron-down')) {
		obj.removeClass('icon-chevron-down');
		obj.addClass('icon-chevron-right');
		
		$.each( $('#categoryList tbody tr'), function(i, tr){
			if($(this).attr('id').indexOf('_'+parentId) >= 0) {
				$(this).remove();
			}
		});
	};
}

function downCategory(categoryId) {
	$.ajax({
		type: "POST",
		url: "business/com.heavenbird.book.action.CategoryAction?action=downCategory",
		data: "categoryId="+categoryId,
		dataType: "json",
		success: function(data, textStatus) {
			if(data.success == true) {
				refreshFirstCategoryList();
			} else {
				alert(data.msg);
			}
		}
	});
}

function upCategory(categoryId) {
	$.ajax({
		type: "POST",
		url: "business/com.heavenbird.book.action.CategoryAction?action=upCategory",
		data: "categoryId="+categoryId,
		dataType: "json",
		success: function(data, textStatus) {
			if(data.success == true) {
				refreshFirstCategoryList();
			} else {
				alert(data.msg);
			}
		}
	});
}

function clearEditCategoryDialog() {
	$('#divEditCategoryId').hide();
	$('#inEditCategoryId').val('');
	$('#inEditCategoryType').val('');
	$('#selEditParentId').attr("disabled", true);
	$('#inEditCategoryName').val('');
}

function getParentIdListByCategoryType(categoryType, parentId) {
	$.ajax({
		type: "POST",
		url: "business/com.heavenbird.book.action.CategoryAction?action=getParentCategoryByType",
		data: "categoryType="+categoryType,
		dataType: "json",
		success: function(data, textStatus) {
			$('#selEditParentId').empty();
			if(data.success == true) {
				var categoryShortInfos = data.categoryShortInfos;
				var len = $(categoryShortInfos).length;
				if(len == 0) {
					alert('资料异常，请检查！');
					return;
				}
				$.each(categoryShortInfos, function(i, n) {
					$("<option></option>").val(n.categoryId).text(n.categoryName).appendTo($('#selEditParentId'));
				});
				$('#selEditParentId').val(parentId);
			} else {
				alert(data.msg);
			}
		}
	});
}

function delCategory(categoryId) {
	$.ajax({
		type: "POST",
		url: "business/com.heavenbird.book.action.CategoryAction?action=delCategory",
		data: "categoryId="+categoryId,
		dataType: "json",
		success: function(data, textStatus) {
			if(data.success == true) {
				refreshFirstCategoryList();
			} else {
				alert(data.msg);
			}
		}
	});
}

function editCategory(categoryId) {
	$.ajax({
		type: "POST",
		url: "business/com.heavenbird.book.action.CategoryAction?action=getCategoryDetail",
		data: "categoryId="+categoryId,
		dataType: "json",
		success: function(data, textStatus) {
			if(data.success == true) {
				var categoryDetail = data.categoryDetail;
				$('#editCategoryDialog').modal('show');
				$('#divEditCategoryId').hide();
				$('#inEditCategoryId').val(categoryDetail.categoryId);
				if (categoryDetail.categoryType == 1) {
					$('#inEditCategoryType').val('支出');
				} else if (categoryDetail.categoryType == 2) {
					$('#inEditCategoryType').val('收入');
				} 
				$('#inEditCategoryType').attr("disabled", true);
				if (categoryDetail.parentId == -1) {
					$('#selEditParentId').attr("disabled", true);
					$('#divEditParentId').hide();
				} else {
					$('#divEditParentId').show();
					$('#selEditParentId').attr("disabled", false);
					getParentIdListByCategoryType(categoryDetail.categoryType, categoryDetail.parentId);
				}
				$('#inEditCategoryName').val(categoryDetail.categoryName);
			} else {
				alert(data.msg);
			}
		}
	});
}

$(document).ready(function(){
	$("input[name='categoryLevel']").change(function(){
		var level = $(this).val();
		if (level == "0") {
			$('#divParentId').hide();
			$('#divCategoryType').show();
			$('#inCategoryType').attr("disabled", true);
			$('#selParentId').attr("disabled", true);
		} else if (level == "1") {
			$('#divParentId').show();
			getParentIdList();
			$('#divCategoryType').hide();
			$('#inCategoryType').attr("disabled", true);
			$('#selParentId').attr("disabled", false);
		}
	});
	
	$('#newCategoryDialog').on('show', function () {
		initNewCategoryDialog();
    });
	
	$('#newCategoryDialog').on('hidden', function () {
    	//表单重置
    	$('#newCategoryForm')[0].reset();
    });
	
	$('#newCategoryCalBtn').click(function(){
		$('#newCategoryDialog').modal('hide');
	});
	
	$('#newCategoryBtn').click(function() {
		if($('#inCategoryName').val() == '' || $('#inCategoryName').val() == null) {
			alert('您尚未输入新增类别的名称！');
			return false;
		}
		$.ajax({
			type: "POST",
			url: "business/com.heavenbird.book.action.CategoryAction?action=newCategory",
			data: $("#newCategoryForm").serialize(),
			dataType: "json",
			success: function(data, textStatus) {
				if(data.success == true) {
					alert('类别创建成功！');
					$('#newCategoryDialog').modal('hide');
					refreshFirstCategoryList();
				} else {
					alert(data.msg);
				}
			}
		});
	});
	
	refreshFirstCategoryList();
	
	$('#editCategoryCalBtn').click(function(){
   		$('#editCategoryDialog').modal('hide');
  	});
	
	$('#editCategoryBtn').click(function(){
		if ($('#inEditCategoryName').val() == '' || $('#inEditCategoryName').val == null) {
			alert('类别名称不能为空！');
			return false;
		}
		//var showedChildrenCategoryArray = new Array();
		//$("i.icon-chevron-down").each(function(){
		//	showedChildrenParentId = $(this).parent().attr('id');
		//	var index = showedChildrenParentId.indexOf('_');
		//	showedChildrenCategoryArray.push(showedChildrenParentId.substring(0, index));
		//});
		$.ajax({
			type: "POST",
			url: "business/com.heavenbird.book.action.CategoryAction?action=editCategory",
			data: $("#editCategoryForm").serialize(),
			dataType: "json",
			success: function(data, textStatus) {
				if(data.success == true) {
					alert("类别信息修改成功！");
					$('#editCategoryDialog').modal('hide');
					refreshFirstCategoryList();
					//for(var i=0; i<showedChildrenCategoryArray.length; i++) {
					//	queryChildrenCategory(showedChildrenCategoryArray.pop());
					//}
				} else {
					alert(data.msg);
				}
			}
		});
	});
	
	 $('#logoutbtn').click(function(){
	    	$.ajax({
				type: "POST",
				url: "business/com.heavenbird.book.action.UserAction?action=logout",
				dataType: "json",
				success: function(data, textStatus) {
					if(data.success == true) {
						alert("用户注销成功！");
						window.location.href="login.html";
					} else {
						alert(data.msg);
					}
				}
			});
	 });
});
</script>